.code,
.rawCode,
.textareaWrap {
	white-space: pre;
	//overflow: scroll;
	//border: 0px solid red;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.info {
	.noShrink {
		flex-shrink: 0;
		display: flex;
		flex-grow: 1;
		flex-direction: column;


		.infoBlock {
			white-space: pre;
			display: flex;
			flex-direction: column;
			flex-grow: 1;
		}
	}
}

.spread {
	flex-grow: 1;
}

textarea {
	margin: 0;
}

.button {
	display: inline-flex;
	align-items: center;
	padding: 0.3em 0.5em;
	margin: 0.3em;
	border: 1px solid gray;
	cursor: pointer;
	border-radius: 3px;
	box-sizing: border-box;

	svg {
		margin-right: 0.3em;
		fill: var(--text)
	}

	&:hover {
		color: var(--hover);
		border-color: var(--hover);

		svg {
			fill: var(--hover);
		}
	}

	&.disallowed {
		pointer-events: none;
		border: 1px dashed var(--textFade);
		color: var(--textFade) !important;
		cursor: not-allowed;

		svg {
			fill: var(--textFade);
		}
	}

	&.activated {
		color: var(--divider);
		fill: var(--divider);
		background: var(--active);

		svg {
			fill: var(--divider);
		}
	}

	&.deactivated {
		margin: calc(0.3em + 1px);

	}
}

.buttonIcon {
	display: flex;
	padding: 0.5em;
	margin: 0;
	border: 1px solid transparent;
	cursor: pointer;
	border-radius: 0;
	fill: var(--text);

	svg {
		width: 12px;
		height: 12px;
	}

	&:not(.disallowed):hover {
		color: var(--hover);
		background: var(--divider);
		border: 1px solid var(--hover);
	}

	&.disallowed {
		pointer-events: none;
		color: black;
		cursor: not-allowed;

		svg {
			fill: var(--textDisallowed)
		}
	}
}

.flex{
	display: flex;
}